<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>添加学员信息表</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css">
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			.header {
				background: #E9ECEF;
			}
			
			.header p {
				color: #8E8887;
			}
			
			.add form {
				overflow: hidden;
			}
			
			.add div {
				width: 20%;
				float: left;
				margin-right: 20px;
			}
			
			button {
				width: 25%;
			}
			
			.list-group-item span {
				display: inline-block;
				width: 33%;
			}
		</style>
	</head>

	<body>
		<div class="header text-center pt-5 pb-5">
			<h1>学员信息表</h1>
			<p>1804</p>
		</div>
		<div class="container mt-4">
			<div class="add">
				<h3>添加</h3>
				<div class="form-group">
					<input type="text" class="form-control n" placeholder="姓名">
				</div>
				<div class="form-group">
					<select class="form-control s" id="exampleFormControlSelect1">
						<option>男</option>
						<option>女</option>
					</select>
				</div>
				<div class="form-group">
					<input type="number" class="form-control a" id="exampleFormControlInput1" name="points" min="0" max="100" placeholder="年龄">
				</div>
				<button type="submit" class="btn btn-primary mb-2" id="btn">添加</button>
			</div>
			<div class="list mt-4">
				<h3>列表</h3>
				<ul class="list-group list-group-flush" id="list">
					<!--<li class="list-group-item">
							<span>姓名</span>
							<span>性别</span>
							<span>年龄</span>
						</li>-->
				</ul>
			</div>
			<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
			<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
			<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
			<script>
				document.querySelector("#btn").addEventListener("click", function() {
					//获取姓名、性别、年龄
					var n = document.querySelector(".n").value;
					var s = document.querySelector(".s").value;
					var a = document.querySelector(".a").value;
					//console.log(n);
					var xmlhttp;
					if(window.XMLHttpRequest) {
						//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
						xmlhttp = new XMLHttpRequest();
					} else {
						// IE6, IE5 浏览器执行代码
						xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
					xmlhttp.onreadystatechange = function() {
						if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
							//document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
							//console.log(xmlhttp.responseText);
							loadXMLDoc();
						}
					}
					xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=" + n + "&sex=" + s + "&age=" + a, true);
					xmlhttp.send();
				})

				function loadXMLDoc() {
					var xmlhttp;
					if(window.XMLHttpRequest) {
						//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
						xmlhttp = new XMLHttpRequest();
					} else {
						// IE6, IE5 浏览器执行代码
						xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					}                                                            
					xmlhttp.onreadystatechange = function() {
						if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
							//document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
							var json = xmlhttp.responseText;
							json = JSON.parse(json);
							//倒叙 排序
							json = json.data.reverse();
							list.innerHTML = '';
							//console.log(json);
							for(let i = 0; i < json.length; i++) {
								var li = document.createElement("li");
								li.classList.add('list-group-item');
								//console.log(li);
								var spanName = document.createElement("span");
								spanName.innerHTML = json[i].studentName;
								//console.log(spanName.innerHTML);
								var spanSex = document.createElement("span");
								spanSex.innerHTML = json[i].sex;

								var spanAge = document.createElement("span");
								spanAge.innerHTML = json[i].age;

								//console.log(nametext);
								li.appendChild(spanName);
								li.appendChild(spanSex);
								li.appendChild(spanAge);

								document.querySelector("#list").appendChild(li);
							}
						}
					}
					xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
					xmlhttp.send();
				}
				loadXMLDoc();
			</script>
	</body>

</html>